<template>
<div class="details">
    <my-head :title="list.date" :go="true" :ri="false"></my-head>
    <div class="main">
        <div class="date">{{list.date}}</div>
        <div class="years">————{{list.years}}————</div>
        <div class="lixi">{{list.lixi}}</div>
        <div class="money">
            <div class="left">
                <div class="top">剩余金额</div>
                <div class="bottom">{{list.money}}</div>
            </div>
            <div class="center">
                <div class="top">期限</div>
                <div class="bottom">{{list.yuefen}}</div>
            </div>
            <div class="right">
                <div class="top">单位</div>
                <div class="bottom">10000.00元/份</div>
            </div>
        </div>
        <div class="content">
            <div class="total"><p>计划总额</p><span>10.0万</span></div>
            <div class="mode"><p>还款方式</p><span>每月付息</span></div>
            <div class="guarantee"><p>计划总额</p><span>安全保障计划+担保专款</span></div>
            <div class="time"><p>剩余时间</p><span>倒计时</span></div>
        </div>
        <div class="jieshao">
            <div class="title">项目介绍</div>
            <div class="fangmian"><p>投机计息</p><p>第三方担保</p><p>适用于会员体系</p></div>
            <div class="duanluo">小微企业主要面向全国地区实际经营一年以上的各类实体经济并提供100万元以内的小额信贷产品业务</div>
        </div>
        <div class="xiangqing">
            <div class="nav">
                <p v-for="(item,index) in toptypes"
                    :key="index"
                    @click="toggle(item.id)"
                    :class="{active:item.id===currentId}"
                >
                    {{item.type}}
                </p>
            </div>
            <div class="xq" v-if="1001==currentId">
              <div class="baozhang">
                  <div class="title">安全保障</div>
                  <div class="content">
                      <p>1、银行存管</p>
                      <p>银行存管 彰显实力 资金透明 合规安全</p>
                      <p>01.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>
                      <p>02.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>

                      <p>2、银行存管</p>
                      <p>银行存管 彰显实力 资金透明 合规安全</p>
                      <p>01.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>
                      <p>02.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>

                      <p>3、银行存管</p>
                      <p>银行存管 彰显实力 资金透明 合规安全</p>
                      <p>01.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>
                      <p>02.落实监管，坚守合规</p>
                      <p>由银监会、工信部、公安部、国家网信办四部委联合发布《网络借贷信息中介机构业务活动管理暂行办法》，
                          要求互联网金融平台必须选择符合要求的银行作为平台投资人和接待人的资金存管机构。在此背景下，小荷在线
                          主动拥抱监管，与银行签订存管协议
                      </p>
                  </div>
              </div>
              <div class="tixi">
                  <div class="title">风控体系</div>
                  <div class="content">
                      <p>1.严格审核材料</p>
                      <p>为了降低投资人风险，保障投资人资金安全，小荷在线会对借款人的基本信息进行详尽调查，
                          对其还款能力进行综合评估，由经验丰富的平台风控团队根据平台风控标准进行二次审核并确认。
                      </p>
                      <p>2.严格审核材料</p>
                      <p>为了降低投资人风险，保障投资人资金安全，小荷在线会对借款人的基本信息进行详尽调查，
                          对其还款能力进行综合评估，由经验丰富的平台风控团队根据平台风控标准进行二次审核并确认。
                      </p>
                      <p>3.严格审核材料</p>
                      <p>为了降低投资人风险，保障投资人资金安全，小荷在线会对借款人的基本信息进行详尽调查，
                          对其还款能力进行综合评估，由经验丰富的平台风控团队根据平台风控标准进行二次审核并确认。
                      </p>
                      <p>4.严格审核材料</p>
                      <p>为了降低投资人风险，保障投资人资金安全，小荷在线会对借款人的基本信息进行详尽调查，
                          对其还款能力进行综合评估，由经验丰富的平台风控团队根据平台风控标准进行二次审核并确认。
                      </p>
                  </div>
              </div>
              <div class="xinxi">
                  <div class="title">借款人信息</div>
                  <div class="content">
                      <div class="top">
                          <span>昵称：小荷陆敏</span><span>年龄：53</span>
                      </div>
                      <div class="center">
                          <span>性别：未设置</span><span>手机号：158****3456</span>
                      </div>
                      <div class="bottom">
                          <span>注册时间：2017-08-31</span><span>所在地区：江苏</span>
                      </div>
                  </div>
              </div>
              <div class="jihua">
                  <div class="title">风险评估及还款保障计划</div>
                  <div class="content">
                      <p>本公司已验证该借款人无不良行为，信息与网上一致，到期后用其他贸易应收款到期或经营利润偿还。
                          防范措施：签署相关借贷协议，办理相关公正手续，办理相关抵押登记手续。他项权证已经办理好，
                          如果项目发生风险，借款人无能力偿还贷款，本公司会兜底处理。
                      </p>
                      <p>查看<span>《风险揭示书》</span></p>
                  </div>
              </div>
              <div class="huodong">
                  <div class="title">活动规则</div>
                  <div class="content">
                      <p>1.投资满2000元，返现46元</p>
                      <p>2.投资满5000元，返现106元</p>
                      <p>3.投资满10000元，返现236元</p>
                      <p>4.投资满30000元，返现696元</p>
                      <p>5.投资满60000元，返现1266元</p>
                      <p>6.投资满100000元，返现2266元</p>
                  </div>
              </div>
              <div class="ziliao">
                  <div class="title">相关资料</div>
                  <div class="content">
                      
                  </div>
              </div>
            </div>
            <div class="xq" v-if="1002==currentId">
              还款记录
            </div>
            <div class="xq" v-if="1003==currentId">
              投资记录
            </div>
        </div>
    </div>
    <div class="footer" v-if="login==true">
        <div class="left" @click="jisuan()">小荷计算器</div>
        <div class="right" v-if="list.touzi == '已经售罄'">{{list.touzi}}</div>
        <div class="right orange" v-if="list.touzi == '我要投资'" @click="touzi()">{{list.touzi}}</div>
        <div class="right" v-if="list.touzi == '还款中…'">{{list.touzi}}</div>
    </div>
    <div class="footer" v-if="login == false">
        <div class="login" @click="goto('login')">登录</div>
        <div class="zhuce" @click="goto('register')">注册</div>
    </div>
</div>
  
</template>

<script>
import Head from '@/components/Head'
export default {
    data(){
        return {
            list:{},
            currentId:1001,
            toptypes:[
                {id:1001,type:'项目详情',content:[]},
                {id:1002,type:'还款记录',content:[]},
                {id:1003,type:'投资记录',content:[]}
            ],
            login:false
        }
    },
    methods:{
        toggle(num){
            console.log(num)
            num && (this.currentId=num)
        },
        touzi(){
          alert("请购买会员")
        },
        jisuan(){
            this.$router.push({path:"/calculator"})
        },
        goto(val){
            this.$router.push({path:"/"+val})
        }
    },
    created(){
        var id = sessionStorage.getItem('itemid')  
        var loginid = sessionStorage.getItem('id')
        this.$http.get("static/json/investment.json").then(res=>{
          for(var i = 0;i<res.data.data.length;i++){
            if(res.data.data[i].id == id){
              this.list = res.data.data[i]
            }
          }
        })
        if(loginid){
            this.login = true;
        }else{
            this.login = false;
        }
    },
    components:{
        myHead:Head
    }
}
</script>

<style scoped>
    .footer .login{
        flex: 1;
        background: #c03124;
        margin: 0.1rem 0.2rem 0.1rem;
        text-align: center;
        line-height: 0.42rem;
    }
    .footer .zhuce{
        flex: 1;
        background: orange;
        margin: 0.1rem 0.2rem 0.1rem;
        text-align: center;
        line-height: 0.42rem;
    }
    .active{
        border-bottom: 2px solid red;
    }
    .xq{
      height: 5.2rem;
      overflow-y:scroll;
    }
    .head{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      border-bottom: 1px solid #ccc;
    }
    .details{
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    /* 主体 */
    .main{
        margin-top: 0.5rem;
        background: #f4f4f4;
        flex: 1;
    }
    .main .date{
        font-weight: bold;
        padding: 0.26rem 0 0.26rem 0.2rem;
        background: #fff;
    }
    .main .years{
        background: #fff;
        font-weight: bold;
        color: red;
        text-align: center;
        padding: 0.09rem 0;
    }
    .main .lixi{
        background: #fff;
        font-size: 0.22rem;
        font-weight: bold;
        color: red;
        text-align: center;
        padding: 0.31rem 0;
    }
    .main .money{
        background: #fff;
        display: flex;
        text-align: center;
    }
    .main .money .top{
        color: #ccc;
        padding: 0.08rem 0;
    }
    .main .money .bottom{
        padding: 0.19rem 0;
    }
    .main .money .left{
        flex: 1;
        border-right: 1px solid #ccc;
    }
    .main .money .center{
        flex: 1;
        border-right: 1px solid #ccc;
    }
    .main .money .right{
        flex: 1;
    }
    .main .content{
        margin-top: 0.2rem;
        background: #fff;
    }
    .main .content p{
        padding-right: 0.23rem;
        color: #ccc;
    }
    .main .content .total{
        display: flex;
        padding: 0.21rem 0 0 0.21rem;
    }
    .main .content .mode{
        display: flex;
        padding: 0.24rem 0 0 0.21rem;
    }
    .main .content .guarantee{
        display: flex;
        padding: 0.24rem 0 0 0.21rem;
    }
    .main .content .time{
        display: flex;
        padding: 0.24rem 0 0.19rem 0.21rem;
    }
    .main .jieshao{
        padding-top: 0.01rem;
        margin-top: 0.2rem;
        background: #fff;
    }
    .main .jieshao .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .jieshao .fangmian{
        display: flex;
        margin-left: 0.19rem;
    }
    .main .jieshao .fangmian p{
        border: 1px solid #c03124;
        color: #c03124;
        border-radius: 10px;
        text-align: center;
        padding: 0.04rem;
        margin-right: 0.2rem;
    }
    .main .jieshao .duanluo{
        padding: 0.15rem 0.25rem 0.2rem 0;
        margin-left: 0.19rem;
        font-size: 0.14rem;
    }
    .main .xiangqing{
        margin-top: 0.2rem;
        margin-bottom: 0.62rem;
    }
    .main .xiangqing .nav{
        display: flex;
        background: #fff;
    }
    .main .xiangqing .nav p{
        flex: 1;
        text-align: center;
        padding: 0.15rem 0;
    }
    /* .main .xiangqing .nav p.active{
        
    } */
    .main .xiangqing .baozhang{
        padding-top: 0.01rem;
        margin-top: 0.2rem;
        background: #fff;
    }
    .main .xiangqing .baozhang .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .baozhang .content{
        color: #ccc;
        margin-left: 0.19rem;
    }
    .main .xiangqing .baozhang .content p{
        font-size: 0.14rem;
        margin-top: 0.1rem;
    }
    .main .xiangqing .tixi{
        padding-top: 0.01rem;
        background: #fff;
    }
    .main .xiangqing .tixi .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .tixi .content{
        color: #ccc;
        margin-left: 0.19rem;
    }
    .main .xiangqing .tixi .content p{
        font-size: 0.14rem;
        margin-top: 0.1rem;
    }
    .main .xiangqing .xinxi{
        padding-top: 0.01rem;
        background: #fff;
    }
    .main .xiangqing .xinxi .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .xinxi .content{
        color: #ccc;
        margin-left: 0.19rem;
    }
    .main .xiangqing .xinxi .content .top{
        margin-top: 0.1rem;
        display: flex;
    }
    .main .xiangqing .xinxi .content .top span{
        flex:1;
        font-size: 0.14rem;
    }
    .main .xiangqing .xinxi .content .center{
        margin-top: 0.1rem;
        display: flex;
    }
    .main .xiangqing .xinxi .content .center span{
        flex:1;
        font-size: 0.14rem;
    }
    .main .xiangqing .xinxi .content .bottom{
        margin-top: 0.1rem;
        display: flex;
    }
    .main .xiangqing .xinxi .content .bottom span{
        flex:1;
        font-size: 0.14rem;
        padding-bottom: 0.2rem;
    }

    .main .xiangqing .jihua{
        margin-top: 0.2rem;
        padding-top: 0.01rem;
        background: #fff;
    }
    .main .xiangqing .jihua .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .jihua .content{
        margin-left: 0.19rem;    
    }
    .main .xiangqing .jihua .content p{
        color: black;
        padding-bottom: 0.2rem;
    }
    .main .xiangqing .jihua .content span{
        color: #c03124;
    }

    .main .xiangqing .huodong{
        margin-top: 0.2rem;
        padding-top: 0.01rem;
        background: #fff;
    }
    .main .xiangqing .huodong .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .huodong .content{
        margin-left: 0.19rem;
        padding-bottom: 0.2rem;
    }
    .main .xiangqing .huodong .content p{
        color: black;
        padding-bottom: 0.05rem;
    }


    .main .xiangqing .ziliao{
        margin-top: 0.2rem;
        padding-top: 0.01rem;
        background: #fff;
    }
    .main .xiangqing .ziliao .title{
        color: red;
        font-size: 0.15rem;
        border-left: 2px solid red;
        padding-left: 0.1rem;
        margin:0.15rem 0 0.15rem 0.19rem;
    }
    .main .xiangqing .ziliao .content{
        margin-left: 0.19rem;
        padding-bottom: 0.2rem;
    }
    /* 底部 */
    .footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 0.62rem;
        color: #fff;
        display: flex;
        font-size: 0.18rem;
        line-height: .62rem;
        background: #fff;
    }
    .footer .left{
        width: 30%;
        background: #c03124;
        text-align: center;
    }
    .footer .right{
        flex: 1;
        background: #ccc;
        text-align: center;
    }
     .footer .right.orange{
        flex: 1;
        background: orange;
        text-align: center;
    }
</style>
